<template>
  <view class="wrap">
    <view class="order-header">
      <up-search class="order-search" placeholder="输入姓名/手机号/订单号/牌照" inputAlign="center" :showAction="false"
        v-model="keyword"></up-search>
      <up-sticky bgColor="#fff">
        <up-tabs :list="orderStatus" @click="handleClick" lineWidth="25" lineColor="#986C5D"
          :activeStyle="{ color: '#986C5D' }"></up-tabs>
      </up-sticky>
    </view>
    <view class="order-list">
      <view class="item" v-for="item in orderList" v-if="orderList.length">
        <view class="flex-jc" @click="onItemClick(item)">
          <view class="title flex-ac">
            <view>{{ item.seriesName }}</view>
            <view class="plate">
              <image src="@/static/img/green-card.png" mode=""></image>
              <view class="numer">{{ item.vehiclePlate }}</view>
            </view>
          </view>
          <view class="amount">
            <text>￥</text>
            <text>{{ item.orderAmount }}</text>
          </view>
        </view>
        <view class="tag-list" @click="onItemClick(item)">
          <text>{{ orderChannelMap.get(item.orderChannel) }}</text>
          <text>异地取还</text>
          <text>异地取还</text>
        </view>
        <view class="info" @click="onItemClick(item)">
          <view class="flex-jc mt10">
            <view>取车网点/门店：{{ item.vehiclePickStoreName }}</view>
          </view>
          <view class="flex-jc mt10">
            <view>还车网点/门店：{{ item.vehicleBackStoreName }}</view>
          </view>
          <view class="flex-jc mt10">
            <view>
              <view>取车方式：{{ item.visitPickFlag == 1 ? '送车上门' : '到店取车' }}</view>
            </view>
          </view>
          <!-- <view class="flex-jc mt10">
            <view>目标入库网点：{{ item.vehicleBackStoreName }}</view>
          </view> -->
          <view class="flex-jc mt10">
            <view>接送地址：{{ item.visitPickFlag == 1 ? item.vehiclePickAddressName : item.vehiclePickAddress }}</view>
            <image src="@/static/img/address.png" class="icon" @click.stop="openLocation(item)"
              v-if="item.visitPickFlag == 1 ? item.vehiclePickAddressName : item.vehiclePickAddress"></image>
          </view>
          <view class="flex-jc mt10">
            <view>驾驶员：{{ item.pickDriverUserName || '-' }}</view>
            <image src="@/static/img/call_phone.png" class="icon" @click.stop="callDriver(item.pickDriverUserPhone)"
              v-if="item.pickDriverUserPhone"></image>
          </view>
          <view class="flex-jc mt10">
            <view>用车时间：{{ item.startTime }}</view>
          </view>
        </view>
        <view class="btn-group flex-ac flex-wrap">
          <up-button type="primary" size="mini" color="#000" text="改排车" @click.stop="toDetail(item, 5)"
            v-if="['41'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" size="mini" color="#000" text="去取车" @click.stop="toDetail(item, 1)"
            v-if="['42'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" size="mini" color="#000" text="去送车" @click.stop="toDetail(item, 2)"
            v-if="['11'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" size="mini" color="#000" text="去出库" @click.stop="toDetail(item, 3)"
            v-if="['41'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" size="mini" color="#000" text="去入库" @click.stop="toDetail(item, 4)"
            v-if="['43'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" plain size="mini" color="#986C5D" text="出库完成"
            v-if="['42'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" plain size="mini" color="#986C5D" text="入库完成"
            v-if="['21'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" plain size="mini" color="#986C5D" text="用车中"
            v-if="['11'].includes(item.orderStatus)"></up-button>
          <up-button type="primary" plain size="mini" color="#986C5D" text="用车完成"
            v-if="['21'].includes(item.orderStatus)"></up-button>
        </view>
      </view>
      <view v-else>
        <up-empty mode="list" icon="list" marginTop="100px" text="暂无数据"></up-empty>
      </view>
    </view>
    <ClosePopup title="改排车" ref="changeCarPopupRef" height="70vh">
      <view class="close-popup-content">
        <view class="flex-ac mt20">
          <view class="left-label">周中</view>
          <up-input placeholder="请输入" border="none" color="#999" type="number"></up-input>
          <view class="unit">元/天</view>
        </view>

        <view class="flex-jc popup-btn-group">
          <up-button type="primary" color="#D9D9D9" shape="circle" text="取消" @click="cancel"></up-button>
          <up-button type="primary" color="#B98A73" shape="circle" text="确认改排" @click="confirm"></up-button>
        </view>
      </view>
    </ClosePopup>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import { orderStatusMap } from "../../utils/constans";
import { postRequest } from "../../reuqest/request";
import { onReachBottom, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { orderChannelMap } from "@/utils/constans"
import ClosePopup from "@/components/close-popup/index.vue";

// 创建响应式数据
const orderStatus = reactive(
  [...orderStatusMap].map(([value, label]) => ({
    name: label,
    value,
    badge: {
      value: "",
    },
  }))
);

const changeCarPopupRef = ref(null);
const orderList = ref([]);
const keyword = ref("");
const groupData = ref({});

const model = reactive({
  pageSize: 10,
  pageNum: 1,
  selectStatus: "01",
  total: 0,
});

// 定义方法
function handleClick(item) {
  // console.log("item", item);
  model.selectStatus = item.value;
  getData();
}

const cancel = () => {
  changeCarPopupRef.value.close();
};

const confirm = () => {
  // 
  // changeCarPopupRef.value.close();
};

const getCount = () => {
  postRequest("/wx-operation/api/v1/bm/order/groupCount", {
    pageNum: 1,
    pageSize: 2000,
  }).then(res => {
    if (res.bizCode === "00000") {
      console.log(res.data);
      groupData.value = res.data;
      console.log(groupData.value);
    }
  });
};

const openLocation = item => {
  uni.openLocation({
    latitude: 30.565434,
    longitude: 103.958167,
  })
}
const onItemClick = (item) => {
  toDetail(item, 0);
};

const confirmOut = () => {
  postRequest("/wx-operation/api/v1/bm/order/outOfInventory", {
    uuid: item.uuid,
    operator: "",
    operatorName: "",
    operatorPhone: "",
  }).then(res => {
    if (res.bizCode === "00000") {
      console.log(res.data);
      if (res.data) {
        uni.$u.toast("出库成功");
      }
    }
  });
}

const confirmIn = () => {
  postRequest("/wx-operation/api/v1/bm/order/inOfInventory", {
    uuid: item.uuid,
    operator: "",
    operatorName: "",
    operatorPhone: "",
  }).then(res => {
    if (res.bizCode === "00000") {
      console.log(res.data);
      if (res.data) {
        uni.$u.toast("入库成功");
      }
    }
  });
}

const toDetail = (item, current = 0) => {
  if (current == 3) {
    uni.showModal({
      title: '提示',
      content: '确认出库吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
          confirmOut()
        }
      }
    });

  } else if (current == 4) {
    uni.showModal({
      title: '提示',
      content: '确认入库吗？',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定');
          confirmIn()
        }
      }
    });

  } else if (current == 5) {
    // 改排车
    changeCarPopupRef.value.open();

  } else {
    let param = {
      seriesName: item.seriesName,
      vehiclePlate: item.vehiclePlate,
      vehiclePickStoreName: item.vehiclePickStoreName,
      vehicleBackStoreName: item.vehicleBackStoreName,
      uuid: item.uuid,
      current,
    }
    uni.navigateTo({
      url: `/pages/order/orderDetail?param=${JSON.stringify(param)}`,
    });
  }

};

const callDriver = phone => {
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};

const getData = (push = false) => {
  postRequest("/wx-operation/api/v1/bm/order/page", {
    pageNum: model.pageNum,
    pageSize: model.pageSize,
    orderStatus: model.selectStatus,
  }).then(res => {
    if (res.bizCode === "00000") {
      if (push) {
        orderList.value.push(...(res.data?.list || []));
      } else {
        orderList.value = res.data?.list || [];
      }
      model.total = res.data?.total || 0;
    }
  });
};

onReachBottom(() => {
  console.log("onReachBottom");
  if (orderList.value.length < model.total) {
    model.pageNum += 1;
    getData(true);
  } else {
    uni.$u.toast("已经到底了");
  }
});

onPullDownRefresh(() => {
  model.pageNum = 1;
  getData();
});
onShow(() => {
  getData();
  // getCount();
});
</script>

<style lang="scss">
.wrap {
  width: 100%;
  overflow: hidden;

  .order-header {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    width: 100%;
    z-index: 5;

    .order-search {
      width: 80%;
      margin: 0 auto !important;
    }
  }

  .order-list {
    padding: 10px;
    margin-top: 160rpx;

    .item {
      padding: 40rpx;
      border-radius: 20rpx;
      box-shadow: 0 6rpx 24rpx 0 rgba(0, 0, 0, 0.06);
      color: #525252;
      font-size: 24rpx;
      margin-bottom: 32rpx;

      .tag-list {
        margin: 20rpx 0;

        & text {
          min-width: 114rpx;
          padding: 4rpx 20rpx;
          height: 28rpx;
          background-color: #f1f1f1;
          text-align: center;
          margin-right: 20rpx;
          font-size: 20rpx;
        }
      }

      .info {
        color: #525252;
      }

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .amount {
        color: #986c5d;

        & text:nth-child(2) {
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .title {
        font-size: 32rpx;
        color: #000;
      }

      .btn-group {
        gap: 32rpx;
        margin-top: 16rpx;
        justify-content: flex-end;

        button {
          width: 134rpx !important;
          height: 52rpx !important;
          line-height: 52rpx;
          margin: 0;
          border-radius: 12rpx;
        }
      }
    }
  }
  
}
.close-popup-content {

	button {
		width: 130px !important;
		margin: 0;
		border: none !important;
		border-color: transparent !important;
	}
}
</style>
